import MFooter from 'components/footer'
import MHeader from 'components/header'

import routes from '@/router'
import myRenderRoutes from './utils/myRenderRoutes'

import { BrowserRouter, Route, Routes } from 'react-router-dom';

function App() {
  const list = myRenderRoutes(routes)
  console.log(list);
  return (
    <BrowserRouter>
      <MHeader />
      <Routes>
        { list }
        <Route
          path="*"
          element={
            <main style={{ padding: "1rem" }}>
              <p>There's nothing here!</p>
            </main>
          }
    />
      </Routes>
      <MFooter />
    </BrowserRouter>
  );
}

export default App;
